<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>

    <meta name="description" content="描述">
    <meta name="keywords" content="关键词">
    <link rel="icon" href="">
    <link rel="shortcut icon" href="">
    <!--    <link rel="stylesheet" href="//at.alicdn.com/t/font_2052942_xzk2q3ix0w.css">-->
    <title>我要报道</title>
    <link rel="stylesheet" type="text/css" href="https://www.jq22.com/jquery/bootstrap-3.3.4.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
    <link href="/web/lib/cropper/cropper.min.css" rel="stylesheet">
    <link href="/web/lib/cropper/sitelogo.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <link rel="stylesheet" href="/web/public/css/public.css">
    <link rel="stylesheet" href="/web/public/css/header.css">
    <link rel="stylesheet" href="/web/public/css/footer.css">
    <link rel="stylesheet" href="/web/public/css/report.css">
    <script src="/web/lib/jquery-1.12.4.min.js"></script>
    <script src="/web/public/public.js"></script>
    <script src="/web/lib/jquery.pagination.js"></script>
<!--    <script src="https://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>-->
<!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>-->
    <script src="/web/lib/cropper/cropper.js"></script>
    <script src="/web/lib/cropper/sitelogo.js"></script>
</head>
<body>
<div class="container">
    <!--这里引入header-->
    <include file="/web/html/header/header.htm" page-type="1"></include>
    <div class="banner">
        <img class="banner-img" src="/web/img/img-about.png" alt="">
        <img class="text" src="/web/img/text-reports.png" alt="">
    </div>
    <div id="main">
        <div class="tab-wrap">
            <div class="tab-item">基本信息</div>
        </div>
        <div class="form-wrap">
            <div class="form-item item-name">
                <div class="keyword">项目名称：</div>
                <div class="value must-input">
                    <input type="text" placeholder="请输入项目名称" data-error-sign="项目名称应为1-200字">
                </div>
            </div>
            <div class="form-item company">
                <div class="keyword">单位/部门全称：</div>
                <div class="value must-input">
                    <input type="text" placeholder="请输入单位或部门的全称" data-error-sign="单位/部门全称应为1-200字">
                </div>
            </div>
            <div class="form-item date">
                <div class="keyword">日期：</div>
                <div class="value must-input">
                    <input type="text" placeholder="请填写" data-error-sign="请填写yy-mm-dd格式并且有效的日期">
                </div>
            </div>
            <div class="form-item type">
                <div class="keyword">项目类型：</div>
                <div class="value must-input">
                    <select class="selectpicker" data-error-sign="请选择所项目类型">
                    </select>
                </div>
            </div>
            <div class="form-item contact">
                <div class="keyword">联系人：</div>
                <div class="value must-input">
                    <input type="text" placeholder="联系人" data-error-sign="联系人应为1-200字">
                </div>
            </div>
            <div class="form-item mobile">
                <div class="keyword">手机：</div>
                <div class="value must-input">
                    <input type="text" placeholder="手机" data-error-sign="请填写正确的手机号码">
                </div>
            </div>
            <div class="form-item link">
                <div class="keyword">项目专题链接：</div>
                <div class="value">
                    <input type="text" placeholder="请输入官网或应用下载地址" data-error-sign="项目专题链接不能多于200字符">
                </div>
            </div>
            <div class="form-item intro">
                <div class="keyword">简介：</div>
                <div class="value">
                    <textarea name="" id="" placeholder="项目介绍" data-error-sign="简介不能多于500字符"></textarea>
                </div>
            </div>
            <div class="form-item picture">
                <div class="keyword">项目logo及照片：</div>
                <div class="value">
                    <input type="file" style="display: none;">
                    <div class="img-wrap">
                        <img src="/web/img/default-card.jpg" alt="图片">
                    </div>
                </div>
            </div>
        </div>
        <div class="btn save">提交</div>
    </div>
    <include file="/web/html/footer/footer.htm"></include>
    <div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog"
         tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <form class="avatar-form">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal" type="button">&times;</button>
                        <h4 class="modal-title" id="avatar-modal-label">上传图片</h4>
                    </div>
                    <div class="modal-body">
                        <div class="avatar-body">
                            <div class="avatar-upload">
                                <input class="avatar-src" name="avatar_src" type="hidden">
                                <input class="avatar-data" name="avatar_data" type="hidden">
                                <label for="avatarInput" style="line-height: 35px;">图片上传</label>
                                <button class="btn btn-danger" type="button" style="height: 35px;"
                                        onclick="$('input[id=avatarInput]').click();">请选择图片
                                </button>
                                <span id="avatar-name"></span>
                                <input class="avatar-input hide" id="avatarInput" name="avatar_file" type="file"></div>
                            <div class="row">
                                <div class="col-md-9">
                                    <div class="avatar-wrapper"></div>
                                </div>
                                <div class="col-md-3">
                                    <div class="avatar-preview preview-lg" id="imageHead"></div>

                                </div>
                            </div>
                            <div class="row avatar-btns">
                                <div class="col-md-4">
                                    <div class="btn-group">
                                        <button class="btn btn-danger fa fa-undo" data-method="rotate" data-option="-90"
                                                type="button" title="Rotate -90 degrees"> 向左旋转
                                        </button>
                                    </div>
                                    <div class="btn-group">
                                        <button class="btn  btn-danger fa fa-repeat" data-method="rotate"
                                                data-option="90"
                                                type="button" title="Rotate 90 degrees"> 向右旋转
                                        </button>
                                    </div>
                                </div>
                                <div class="col-md-5" style="text-align: right;">
                                    <button class="btn btn-danger fa fa-arrows" data-method="setDragMode"
                                            data-option="move"
                                            type="button" title="移动">
<span class="docs-tooltip" data-toggle="tooltip" title=""
      data-original-title="$().cropper(&quot;setDragMode&quot;, &quot;move&quot;)">
</span>
                                    </button>
                                    <button type="button" class="btn btn-danger fa fa-search-plus" data-method="zoom"
                                            data-option="0.1" title="放大图片">
<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;zoom&quot;, 0.1)">

</span>
                                    </button>
                                    <button type="button" class="btn btn-danger fa fa-search-minus" data-method="zoom"
                                            data-option="-0.1" title="缩小图片">
<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;zoom&quot;, -0.1)">

</span>
                                    </button>
                                    <button type="button" class="btn btn-danger fa fa-refresh" data-method="reset"
                                            title="重置图片">
<span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="$().cropper(&quot;reset&quot;)"
      aria-describedby="tooltip866214"></span>
                                    </button>
                                </div>
                                <div class="col-md-3">
                                    <button class="btn btn-danger btn-block avatar-save fa fa-save" type="button"
                                            data-dismiss="modal"> 保存修改
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="/web/lib/cropper/html2canvas.min.js"></script>
<script src="/web/lib/axios.min.js"></script>

<script>

    var $itemNameInput = $('.form-item.item-name input'),
        $companyInput = $('.form-item.company input'),
        $dateInput = $('.form-item.date input'),
        $mobileInput = $('.form-item.mobile input'),
        $typeSelect = $('.form-item.type select'),
        $contactInput = $('.form-item.contact input'),
        $linkInput = $('.form-item.link input'),
        $introTextarea = $('.form-item.intro textarea'),
        $selectImgBtn = $('.form-item.picture .img-wrap'),
        $selectImgInput = $selectImgBtn.prev("input[type=file]"),
        imgCardUrl = '';

    $(function () {
        $selectImgBtn.click(function () {
            $selectImgInput.click();
        });
        $selectImgInput.change(function (e) {
            var file = this;
            var filemaxsize = 1024 * 5;//5M
            var target = $(e.target);
            var Size = target[0].files[0].size / 1024;
            if (!file.files[0].type.match(/image.*/)) {
                utils.showToast({
                    title: '请选择正确的图片格式',
                    type: 'warning'
                });
                return false;
            }
            if (Size > filemaxsize) {
                utils.showToast({
                    title: '图片过大，请重新选择',
                    type: 'warning'
                });
                return false;
            }
            var reader = new FileReader();
            if (file) {
                reader.readAsDataURL(file.files[0])
            }
            // 捕获 转换完毕
            reader.onload = function(e) {
                // 转换后的base64就在e.target.result里面,直接放到img标签的src属性即可
                $('.form-item.picture .img-wrap img').prop('src',e.target.result);
                imagesAjax(e.target.result);
            }
        });

        function showErrorSign(el){
            if(!el.next('.error-sign').length){
                el.after('<span class="error-sign">'+ el.data('errorSign') +'</span>');
            }
        }
        function hideErrorSign(el){
            el.next('.error-sign').remove();
        }
        function testValEmpty(el,str){
            var val = str||el.val().trim();
            if (!val||val.length>200) {
                showErrorSign(el);
            } else {
                hideErrorSign(el);
            }
            return Boolean(val);
        }

        $.ajax({
            url: ports.getReportList,
            success: function (res) {
                console.log('查询我要报道列表', res);
                $.each(res.data,function (i,item) {
                    $('.type .selectpicker').append('<option value='+ item.constantName +'>'+ item.constantName +'</option>');
                });
                $('.selectpicker').selectpicker({});
            }
        })
        $itemNameInput.change(function () {
            testValEmpty($(this))
        });
        $companyInput.change(function () {
            testValEmpty($(this))
        });
        $dateInput.change(function () {

            if (!utils.isDate($(this).val().trim())) {
                showErrorSign($(this));
            } else {
                hideErrorSign($(this));
            }
        });
        $contactInput.change(function () {
            testValEmpty($(this))
        });
        $mobileInput.change(function () {
            if (!utils.testPhoneNumber($(this).val().trim())) {
                showErrorSign($(this));
            } else {
                hideErrorSign($(this));
            }
        });
        $linkInput.change(function () {
            var val = $(this).val().trim();
            if (val.length>200) {
                showErrorSign($(this));
            } else {
                hideErrorSign($(this));
            }
        });
        $introTextarea.change(function () {
            var val = $(this).val().trim();
            if (val.length>500) {
                showErrorSign($(this));
            } else {
                hideErrorSign($(this));
            }
        });

        $('.btn.save').click(function () {
            var pass = true;
            if(!testValEmpty($itemNameInput)){
                pass = false;
            }
            if(!testValEmpty($companyInput)){
                pass = false;
            }
            if(!utils.isDate($dateInput.val().trim())){
                pass = false;
                showErrorSign($dateInput)
            }
            if(!testValEmpty($contactInput)){
                pass = false;
            }
            if(!utils.testPhoneNumber($mobileInput.val().trim())){
                pass = false;
                showErrorSign($mobileInput);
            }
            if($linkInput.val().trim().length>200){
                pass = false;
                showErrorSign($linkInput);
            }
            if($introTextarea.val().trim().length>500){
                pass = false;
                showErrorSign($introTextarea);
            }

            if (pass) {
                $.ajax({
                    url: ports.commitReport,
                    data: {
                        "projectName": $itemNameInput.val().trim(),
                        "departmentName": $companyInput.val().trim(),
                        "linkman": $contactInput.val().trim(),
                        "phoneNumber": $mobileInput.val().trim(),
                        "projectUrl": $linkInput.val().trim(),
                        "projectIntro": $introTextarea.val().trim(),
                        "projectType": $typeSelect.val().trim(),
                        "projectReleaseTime": $dateInput.val().trim(),
                        picUrl:imgCardUrl
                    },
                    success: function (res) {
                        console.log('提交我要报道信息', res);
                        if(res.status==200){
                            utils.showToast({
                                title:'提交成功',
                                type:'success'
                            })
                            window.location.href = '/';
                        }
                    }
                })
            }
        })
    })
</script>
<script>
    //做个下简易的验证  大小 格式
    $('#avatarInput').on('change', function (e) {
        var filemaxsize = 1024 * 5;//5M
        var target = $(e.target);
        var Size = target[0].files[0].size / 1024;
        if (Size > filemaxsize) {
            alert('图片过大，请重新选择!');
            $(".avatar-wrapper").children().remove;
            return false;
        }
        if (!this.files[0].type.match(/image.*/)) {
            alert('请选择正确的图片!')
        } else {
            var filename = document.querySelector("#avatar-name");
            var texts = document.querySelector("#avatarInput").value;
            var teststr = texts; //你这里的路径写错了
            testend = teststr.match(/[^\\]+\.[^\(]+/i); //直接完整文件名的
            filename.innerHTML = testend;

            if(!$(".avatar-wrapper img.cropper-hidden").length){
                var timer = setInterval(function () {
                    if($(".avatar-wrapper img.cropper-hidden").length){
                        clearInterval(timer);
                        $(".avatar-wrapper img").cropper('destroy').cropper({aspectRatio: 228/134, preview: '#imageHead', strict: false,});
                    }
                },1)
            }

        }

    });

    $(".avatar-save").on("click", function () {
        var img_lg = document.getElementById('imageHead');
        // 截图小的显示框内的内容
        html2canvas(img_lg, {
            allowTaint: true,
            taintTest: false,
            onrendered: function (canvas) {
                canvas.id = "mycanvas";
                //生成base64图片数据
                var dataUrl = canvas.toDataURL("image/jpeg");
                $("*[data-target='#avatar-modal'] img").prop('src', dataUrl);
                imagesAjax(dataUrl)
            }
        });
    })

    function imagesAjax(src) {
        axios({
            method:'post',
            url:ports.uploadCooperationPicture,
            data:utils.base64ToFormData(src),
            contentType:'multipart/form-data',
            responseType:'json',
            headers: {
                'Authorization': utils.cookieUtils.getCookie("token")
            }
        }).then(function(res) {
            console.log('上传图片', res);
            imgCardUrl = res.data.data;
        });
    }
</script>
</body>
</html>
